<template>
	<view class="map-content">

		<view class="map-header">
			<u-search placeholder="请输入搜索地点" v-model="regionKeyword" :show-action="false"
				@change="$u.debounce(changeRegionKeyword, 1000)"></u-search>

			<view class="location-text u-flex">
				<text>{{currentLocation}}</text>
				<view class="anew u-flex" @tap="anewLocation">
					<u-icon name="info-circle" color="#FF2A47" size="30rpx"></u-icon>
					重新定位
				</view>
			</view>
		</view>


		<view class="map-list-content">
			<view class="list-content-title u-flex">
				<u-icon name="map" color="#999999" size="30rpx"></u-icon>
				<view class="title-text">附近的地址</view>
			</view>
			<view class="list-content-item" v-for="(item,index) in locationList" :key="index" @tap="handleLocation(item)">
				<view class="list-title">{{item.title}}</view>
				<text class="list-etails">{{item.address}}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, getCurrentInstance, unref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { suggestion, addressResolution } from '@/common/sys.api';
	const { proxy } = getCurrentInstance();
	let currentLocation = ref('获取位置中');
	let regionKeyword = ref('');
	let locationList = ref([])

	onLoad(() => {
		currentLocation.value = unref(proxy['vuex_current_position']).formatted_addresses.rough;
		getLocation(currentLocation.value)
	})

	async function getLocation(location) {
		const data = await suggestion({ keyword: location });
		locationList.value = data.data
	}

	function changeRegionKeyword() {
		getLocation(regionKeyword.value)
	}

	function anewLocation() {
		currentLocation.value = '获取位置中'
		uni.getLocation({
			type: 'gcj02',
			success: async function (res) {
				getAddressResolution(res.latitude, res.longitude)
			}, fail(err) {
				console.log(err, 'getLocation err');
			}
		});
		currentLocation.value = unref(proxy['vuex_location']).name;
	}

	async function getAddressResolution(latVal, lngVal) {
		const data = await addressResolution({ lat: latVal, lng: lngVal });
		let result = data?.result;
		if (result) {
			uni.$u.vuex('vuex_location', {
				areaName: result?.ad_info?.city,
				cityName: result?.ad_info?.district,
				code: result?.ad_info?.adcode,
				provinceName: result?.ad_info?.province,
				name: result?.address,
			});
			uni.$u.vuex('vuex_current_position', result);
			uni.navigateBack({
				delta: 1
			});
		}
	}

	function handleLocation(item) {
		getAddressResolution(item.location.lat, item.location.lng)
	}
</script>

<style lang="scss" scoped>
	.map-content {
		background-color: #F2F2F2;

		.map-header {
			background: #fff;
			padding: 20rpx;

			.location-text {
				font-weight: 400;
				color: #333333;
				font-size: 26rpx;
				justify-content: space-between;
				margin-top: 24rpx;
			}

			.anew {
				color: #FF2A47;
			}
		}

		.map-list-content {
			margin-top: 20rpx;
			padding: 10rpx 20rpx;
			background-color: #fff;

			.list-content-title {
				font-weight: 500;
				color: #999999;
				font-size: 26rpx;
				margin-bottom: 20rpx;

				.title-text {
					padding-left: 5rpx;
				}
			}

			.list-content-item {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 10rpx;
				padding-bottom: 5rpx;
				border-bottom: 1px solid #eee;

				.list-title {
					margin: 10rpx 0 5rpx 0;
				}

				.list-etails {
					color: #999999;
				}
			}
		}
	}
</style>